<template>
  <van-dialog class-name="contract-co" use-slot :show="show">
    <view class="text">{{ title||'公司联系' }}</view>
    <view class="card">
      <view class="card-title">联系方式</view>
      <view class="card-info">
        <view class="card-item">
          <text class="card-item-label">微信：</text>
          <text class="card-item-value">{{ wxUsername || '--' }}</text>
          <a-btn class="card-item-btn" type="text" @tap="copyWx()">复制</a-btn>
        </view>
        <view class="card-item">
          <text class="card-item-label">电话：</text>
          <text class="card-item-value">{{ mobile || '--' }}</text>
          <a-btn class="card-item-btn" type="text" @tap="dial">拨打</a-btn>
        </view>
      </view>
    </view>
  </van-dialog>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String
  },
  data () {
    return {
      wxUsername: 'aoxueqilingling',
      mobile: '15815927424'
    }
  },
  methods: {
    copyWx () {
      uni.setClipboardData({
        data: this.wxUsername,
        success: function () {
          this.toast('微信号已复制')
        }
      })
    },
    dial () {
      uni.makePhoneCall({
        phoneNumber: this.mobile
      })
    }
  }
}
</script>

<style lang="less" scoped>
van-dialog {
  padding: @box-gap;
}
.text {
  padding: @box-gap;
}
.card {
  background: #f7f7f7;
  border-radius: 20rpx 24rpx;
  &-title {
    padding: 36rpx 24rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 2rpx solid #e5e5e5;
  }
  &-info {
    padding: 0 24rpx;
  }
  &-item {
    .flexLayout(@a:center);
    height: 90rpx;
    &-label {
      font-size: 30rpx;
      color: #666;
    }
    &-value {
      flex: 1;
      text-align: right;
      font-size: 30rpx;
      color: #333;
    }
    &-btn {
      width: 125rpx;
    }

    &:first-of-type {
      border-bottom: 2rpx solid #e6e6e6;
    }
  }
}
/deep/a-btn {
  width: 125rpx;
}
/deep/.axq-btn {
  width: 125rpx;
}
</style>
